<template>
    <div class="sun_ying_wp">
        <div class="sun_ying_title">
            <span>损盈设置</span>
            <i class="iconfonMy icon-guanbi1" @click="ipcRenderer.send('send-sunYing-info')"></i>
        </div>
        <div class="s_y_top">
            <span>合约：{{ orderInfo['合约名称'] }}</span>
            <span>止盈止损数量： <input type="number" min="1" step="1" v-model="orderInfo['数量']" @input="heardInout()"
                    :disabled="orderInfo['止盈止损ID']"> </span>
            <span>方向：<span :style="{ color: orderInfo['方向'] == 1 ? 'red' : 'green' }">{{ orderInfo['方向'] == 1 ? '买' : '卖'
            }}</span></span>
        </div>
        <div class="s_y_body">
            <div class="body_item">
                <div>
                    <span>止盈价位</span>
                    <input type="number" v-model="orderInfo['止盈价位']" @input="heardInout(1)" :step="orderInfo['最小波动']">
                </div>
                <div>
                    <span>止盈金额</span>
                    <input type="number" v-model="orderInfo['止盈金额']" @input="heardInout(2)"
                        :step="orderInfo['最小波动'] * orderInfo['数量'] * orderInfo['客户端合约乘数']">
                </div>
            </div>
            <div class="body_item">
                <div>
                    <span>止损价位</span>
                    <input type="number" v-model="orderInfo['止损价位']" @input="heardInout(3)" :step="orderInfo['最小波动']">
                </div>
                <div>
                    <span>止损金额</span>
                    <input type="number" v-model="orderInfo['止损金额']" @input="heardInout(4)"
                        :step="orderInfo['最小波动'] * orderInfo['数量'] * orderInfo['客户端合约乘数']">
                </div>
            </div>
        </div>
        <div class="message" style="color:#000;text-align: center;margin-bottom: 5px;">
            <span style="margin-right:10px">止盈价位：{{ orderInfo['止盈价位'] || 0 }}</span>
            <span>盈：{{ orderInfo['止盈金额'] || 0 }}</span>
            <span style="margin: 0 10px; ">止损价位：{{ orderInfo['止损价位'] || 0 }}</span>
            <span>损：{{ orderInfo['止损金额'] || 0 }}</span>
        </div>
        <div class="message"> 说明：止损止盈不能保证以指定价格成交，止盈止损由服务端实现，关闭本软件依然有效</div>
        <div class="btns">
            <span @click="sendInfo(orderInfo)">确定</span>
            <span @click="ipcRenderer.send('send-sunYing-info')">取消</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const { ipcRenderer } = require('electron');

let orderInfo = ref({})

ipcRenderer.on('send-sunying', (e, v) => {
    orderInfo.value = JSON.parse(v)
    if (orderInfo.value['止盈金额'] || orderInfo.value['止损金额']) {
        return
    }
    // heardInout()
})

function sendInfo(v) {
    ipcRenderer.send('send-sunYing-info', JSON.stringify(v))
}
function heardInout(type) {
    let info = orderInfo.value
    if (type == 1 && info['止盈价位'] !== '' || !type && info['止盈价位'] !== '') {
        let price = ''
        if (info['方向'] == 1) {
            price = (info['止盈价位'] - info['持仓均价']) * info['数量'] * info['客户端合约乘数'];
        }
        if (info['方向'] == 2) {
            price = (info['持仓均价'] - info['止盈价位'] * 1) * info['数量'] * info['客户端合约乘数'];
        }
        orderInfo.value['止盈金额'] = parseFloat(price.toFixed(info['位数']))
    }
    if (type == 2 && info['止盈金额'] !== '') {
        let price = ''
        if (info['方向'] == 1) {
            price = info['持仓均价'] * 1 + info['止盈金额'] / info['数量'] / info['客户端合约乘数'];
        }
        if (info['方向'] == 2) {
            price = info['持仓均价'] - info['止盈金额'] / info['数量'] / info['客户端合约乘数'];
        }
        orderInfo.value['止盈价位'] = parseFloat(price.toFixed(info['位数']))
    }
    if (type == 3 && info['止损价位'] !== '' || !type && info['止损价位'] !== '') {
        let price = ''
        if (info['方向'] == 1) {
            price = (info['持仓均价'] - info['止损价位']) * info['数量'] * info['客户端合约乘数'];
        }
        if (info['方向'] == 2) {
            price = (info['止损价位'] - info['持仓均价']) * info['数量'] * info['客户端合约乘数'];
        }
        orderInfo.value['止损金额'] = parseFloat(price.toFixed(info['位数']))
    }
    if (type == 4 && info['止损金额'] !== '') {
        let price = ''
        if (info['方向'] == 1) {
            price = info['持仓均价'] - info['止损金额'] / info['数量'] / info['客户端合约乘数'];
        }
        if (info['方向'] == 2) {
            price = info['持仓均价'] * 1 + info['止损金额'] / info['数量'] / info['客户端合约乘数'];
        }
        orderInfo.value['止损价位'] = parseFloat(price.toFixed(info['位数']))
    }

    if (type == 1 && info['止盈价位'] === '' || !type && info['止盈价位'] === '') {
        orderInfo.value['止盈金额'] = ''
    }
    if (type == 2 && info['止盈金额'] === '') {
        orderInfo.value['止盈价位'] = ''
    }
    if (type == 3 && info['止损价位'] === '' || !type && info['止损价位'] === '') {
        orderInfo.value['止损金额'] = ''
    }
    if (type == 4 && info['止损金额'] === '') {
        orderInfo.value['止损价位'] = ''
    }
}
</script>

<style scoped lang="less">
.sun_ying_wp {
    background-color: #f0f0f0;
    color: #000;
    width: 400px;
    height: 220px;
    overflow: hidden;

    .sun_ying_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 5px;
        background: #d5d8e6;
        -webkit-app-region: drag;

        i {
            width: 20px;
            line-height: 20px;
            text-align: center;
            -webkit-app-region: no-drag;
        }
    }

    .s_y_top {
        display: flex;
        align-items: center;
        padding: 10px;

        span {
            margin-right: 15px;
        }

        input {
            width: 60px;

        }
    }

    .s_y_body {

        .body_item,
        div {
            display: flex;
            align-items: center;
            justify-content: space-between;

            input {
                width: 120px;
            }

            >div {
                padding-bottom: 10px;
                padding-right: 10px;
                padding-left: 10px;

                span {
                    margin-right: 10px;
                }
            }
        }
    }

    .message {
        color: red;
        padding: 0 10px;
    }

    .btns {
        padding: 10px 20px;
        text-align: right;

        span {
            display: inline-block;
            border: 1px solid #d0d0d0;
            border-radius: 3px;
            width: 70px;
            text-align: center;
            margin-left: 10px;
        }

        span:active {
            border-color: #268bd8;
        }
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    /* 始终显示箭头 */
}

/* 针对 Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    /* 让箭头始终显示 */
}
</style>
